<template>
    <el-dialog
        v-model="props.isShow"
        title="选择服务"
        width="70%"
        style="height: 70vh"
        destroy-on-close
        @close="close"
        @open="open"
    >
        <el-table :data="tableData" style="width: 100%;height:600px" @selection-change="selection">
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="service_id" label="ID" width="180"/>
            <el-table-column prop="service_cover_img" label="封面" width="180">
                <template #default="{row}">
                    <el-image :src="fullUrl(row.service_cover_img)" style="height:50px;width: 50px"
                              fit="fill"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="service_name" label="服务名称"/>
            <el-table-column prop="service_price" label="价格"/>
            <el-table-column prop="service_duration" label="服务时长"/>
            <el-table-column prop="distribution_rebate" label="分销返佣(%)"/>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">关闭</el-button>
                <el-button type="primary" @click="submit">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import {ref, toRaw} from "vue";
import {addService, technicianServiceSel2} from "/@/api/backend/technician";
import Template from "/@/lang/backend/en/sms/template";
import {fullUrl} from "/@/utils/common";
import {ElMessage} from "element-plus";

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    }
})


const emit = defineEmits(['close'])

const close = () => {
    emit('close')
}


const tableData = ref();


const open = () => {
    technicianServiceSel2().then(ret => {
        tableData.value = ret.data.list
    })
}

let ids = []
const selection = (row) => {
    ids = []
    for (let i = 0; i < row.length; i++) {
        ids[i] = row[i].service_id
        console.log("row", row[i].service_id)
    }
    console.log(ids)
}
const submit = () => {
    if (ids.length < 1) {
        ElMessage({
            message: '请选择服务！',
            type: 'warning',
        })
        return
    }

    addService({ids: ids.toString()}).then(ret => {
        if (ret.code == 0) {
            ElMessage({
                message: ret.msg,
                type: 'danger',
            })
            return
        }
        ElMessage({
            message: ret.msg,
            type: 'success',
        })
        close()
        return
    })

}
</script>
<style scoped lang="scss">
.el-table {
    margin-top: 20px;
}
</style>
